<template>
  <div class="lookhome" @click="closeDoudong">
    <div class="look-box" v-if="showLook">
      <img src="../assets/images/person.png" alt="" />
      <p>没有看板</p>
    </div>
    <div class="looklist" v-if="!showLook">
      <ul>
        <li
          @touchend.stop.prevent = "myTouchEnd"
          @touchstart.stop.prevent="myTouchStart"
          :class="num > 3 ? 'active' : ''"
          v-for="(item, index) in lookArr"
          :key="item.a"
        >
          <!-- @touchstart.stop.prevent="myDelete(index)" -->
          <div class="btn-delete">
            <button
              @touchstart.stop.prevent="myDelete(index)"
              v-if="num > 3 ? true : false"
            >
              X
            </button>
          </div>
          <div class="con">
            <h3>{{ item.name }}</h3>
            <p>
              更新于 {{ yy }}.{{ mm }}.{{ dd }}
              <!-- @click="myDelete(index)" -->
              <!-- @touchstart.stop.prevent="myTouchStart(index)"
                @touchleave.stop.prevent="myTouchLeave" -->
              <button>··</button>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div class="create-btn">
      <button @click="myCreate">新建</button>
    </div>

    <transition
      :duration="{ enter: 1000, leave: 350 }"
      enter-to-class="animate__animated animate__fadeIn"
      enter-active-class="animate__animated animate__fadeIn"
      leave-to-class="animate__animated animate__fadeOut"
      leave-active-class="animate__animated animate__fadeOut"
    >
      <div class="createbox" v-if="create">
        <div class="create">
          <div class="form">
            <button>封面</button>
          </div>
          <div class="name">
            <input v-model="name" type="text" placeholder="名字" />
          </div>
          <div class="create-btn">
            <button @click="mySure">保存</button>
            <button @click="myClose">取消</button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Lookhome",
  data() {
    return {
      showLook: true,
      lookArr: [],
      create: false,
      name: "",
      imgUrl: "",
      yy: "",
      mm: "",
      dd: "",
      isTouchStart: false,
      num: 0,
      timer: null,
    };
  },
  methods: {
    isShow() {
      if (this.lookArr.length != 0) {
        this.showLook = false;
      } else {
        this.showLook = true;
      }
    },
    myCreate() {
      this.create = true;
    },
    myClose() {
      this.create = false;
    },
    mySure() {
      if (this.name.length == 0) {
        alert("名字不能为空");
        return false;
      }
      let obj = {};
      obj.name = this.name;
      obj.imgUrl = this.imgUrl;
      obj.a = this.lookArr.length;
      this.lookArr.push(obj);
      this.create = false;
      this.name = "";
      this.isShow();
    },

    myTouchStart(i) {
      this.isTouchStart = true;
      if (this.isTouchStart) {
        this.timer = setInterval(() => {
          this.num++;
          if (this.num > 3) {
            clearInterval(this.timer);
            // this.lookArr.splice(i, 1);
            if (this.lookArr.length == 0) {
              this.showLook = true;
            }
            // this.num = 0;
          }
        }, 300);
      }
    },
    myTouchEnd() {
      clearInterval(this.timer);
      this.isTouchStart = false;
    },
    closeDoudong() {
      this.num = 0;
      this.isTouchStart = false;
      clearInterval(this.timer);
    },
    myDelete(i) {
      this.lookArr.splice(i, 1);
      if (this.lookArr.length == 0) {
        this.showLook = true;
        this.isTouchStart = false;
        clearInterval(this.timer);
      }
    },
  },
  mounted() {
    let dt = new Date();
    this.yy = dt.getFullYear();
    this.mm = dt.getMonth() + 1;
    this.dd = dt.getDate();
    this.mm = this.mm < 10 ? "0" + this.mm : this.mm;
    this.dd = this.dd < 10 ? "0" + this.dd : this.dd;
  },
};
</script>

<style lang="less" scoped>
.lookhome {
  width: 100%;
  padding-bottom: 100px;
  .looklist {
    width: 100%;
    padding-top: 10px;
    box-sizing: border-box;
    ul {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-content: flex-start;
      flex-wrap: wrap;
      padding: 10px 15px;
      box-sizing: border-box;
      li {
        width: 165px;
        height: 200px;
        border-radius: 15px;
        background-color: rgba(0, 0, 0, 0.6);
        // overflow: hidden;
        margin-bottom: 10px;
        position: relative;
        // transform: rotateZ(1deg);
        &.active {
          animation: doudong 0.5s linear infinite;
        }
        .btn-delete {
          width: 30px;
          height: 30px;
          position: absolute;
          left: -10px;
          top: -10px;
          z-index: 100;
          button {
            display: block;
            background-color: red;
            color: white;
            border-radius: 50%;
            width: 100%;
            height: 100%;
          }
        }
        .con {
          height: 100%;
          width: 100%;
          padding: 0 10px;
          box-sizing: border-box;
          color: white;
          padding-top: 120px;
          h3 {
            font-size: 20px;
            border-bottom: 1px solid #fff;
            box-sizing: border-box;
            padding: 10px 0;
            margin-bottom: 7px;
          }
          p {
            font-size: 10px;
            position: relative;
            button {
              position: absolute;
              right: -8px;
              top: -9px;
              background-color: transparent;
              color: white;
              font-size: 30px;
            }
          }
        }
      }
    }
  }
  .look-box {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 100px;
    box-sizing: border-box;
    img {
      width: 250px;
    }
    p {
      color: #aaa9a9;
      font-size: 28px;
    }
  }
  .create-btn {
    width: 100%;
    padding-top: 20px;
    button {
      display: block;
      font-size: 14px;
      color: white;
      background-color: #029602;
      padding: 10px 37px;
      border-radius: 20px;
      margin: 0 auto;
    }
  }
  .createbox {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    .create {
      width: 300px;
      height: 260px;
      border-radius: 25px;
      margin: 150px auto 0;
      background-color: white;
      padding: 20px 20px;
      box-sizing: border-box;
      .form {
        width: 100%;
        height: 100px;
        border-radius: 10px;
        margin-bottom: 20px;
        button {
          width: 100%;
          height: 100%;
          font-size: 16px;
        }
      }
      .name {
        width: 100%;
        input {
          width: 100%;
          height: 40px;
          background-color: #f0f0f0;
          font-size: 16px;
          padding-left: 10px;
        }
      }
      .create-btn {
        display: flex;
      }
    }
  }

  @keyframes doudong {
    0% {
      transform: rotateZ(1deg);
    }
    25% {
      transform: rotateZ(-1deg);
    }
    50% {
      transform: rotateZ(1deg);
    }
    75% {
      transform: rotateZ(-1deg);
    }
    100% {
      transform: rotateZ(1deg);
    }
  }
}
</style>